<template>
  <el-container style="padding: 15px">
    <el-header>
      <el-form size="small" label-width="70px">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="4">
            <el-form-item label="角色名称">
              <el-input v-model="roleSearch.roleName" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="角色代码">
              <el-input v-model="roleSearch.roleCode" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="0">
              <el-button type="primary">搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-divider />
    <el-main>
      <el-form size="small">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="1">
            <el-form-item>
              <el-button type="success" @click="addRoleHandler">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="roleList">
        <el-table-column label="角色名称" prop="roleName" />
        <el-table-column label="角色代码" prop="roleCode" />
        <el-table-column label="角色备注" prop="remark" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="updateHandler(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteRoleById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="sizePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-main>
    <el-dialog :title="roleUpdateDialogTitle" :visible.sync="roleUpdateDialogVisible" width="30%" destroy-on-close>
      <el-form size="small" label-width="70px">
        <el-row type="flex" align="center">
          <el-col :span="12">
            <el-form-item label="角色名称">
              <el-input v-model="roleUpdateObj.roleName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色代码">
              <el-input v-model="roleUpdateObj.roleCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="center">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="roleUpdateObj.remark" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider />
        <el-row type="flex" align="center">
          <el-col>
            <el-form-item label="角色资源">
              <el-cascader
                v-model="roleUpdateObj.resources"
                :options="options"
                :props="{ multiple: true, checkStrictly: true, emitPath: false, label: 'resourceName', value: 'id', children: 'child' }"
                collapse-tags
                clearable
                @change="leafChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="center">
          <el-col :span="12" />
        </el-row>
        <el-row type="flex" align="center">
          <el-col>
            <el-form-item>
              <el-button type="primary" @click="saveOrUpdateRoleObj">确定</el-button>
              <el-button @click="clearDialog">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import { addRole, getRoleById, pageRoleList, updateRole } from '@/api/role'
import { validObj } from '@/utils/validate'
import { getResourceByRoleId } from '@/api/resource'

export default {
  name: 'Index',
  data() {
    return {
      roleSearch: {},
      roleUpdateObj: {},
      options: [],

      roleList: [],
      currentPage: 1,
      sizePage: 10,
      totalPage: 0,

      roleUpdateDialogTitle: '',
      roleUpdateDialogVisible: false
    }
  },

  created() {
    this.init()
  },

  methods: {
    handleSizeChange(val) {
      this.sizePage = val
      this.getPage()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getPage()
    },
    init() {
      this.getPage()
      this.resourceTreeInfo()
    },
    getPage() {
      const currentPage = this.currentPage
      const sizePage = this.sizePage
      const roleSearch = this.roleSearch
      if (validObj(roleSearch)) {
        // 搜索
      } else {
        pageRoleList(currentPage, sizePage).then(res => {
          this.roleList = res.data.list
          this.totalPage = res.data.total
        })
      }
    },

    updateHandler(id) {
      getRoleById(id).then(res => {
        this.roleUpdateObj = res.data.roleInfo
        this.roleUpdateObj.resources = res.data.resource
        this.roleUpdateDialogVisible = true
      })
    },

    resourceTreeInfo() {
      getResourceByRoleId().then(res => {
        this.options = res.data.list
      })
    },

    leafChange(val) {
      this.roleUpdateObj.resources = val
    },

    deleteRoleById(id) {},
    addRoleHandler() {
      this.roleUpdateObj = {}
      this.roleUpdateDialogTitle = '添加'
      this.roleUpdateDialogVisible = true
    },

    saveOrUpdateRoleObj() {
      const roleUpdateObj = this.roleUpdateObj
      if (roleUpdateObj.id) {
        // 修改
        this.update(roleUpdateObj)
      } else {
        // 添加
        this.save(roleUpdateObj)
      }
    },

    save(data) {
      addRole(data).then(res => {
        this.$message.success(res.message)
        this.clearDialog()
        this.getPage()
      })
    },

    update(data) {
      updateRole(data).then(res => {
        this.$message.success(res.message)
        this.clearDialog()
        this.getPage()
      })
    },

    clearDialog() {
      this.roleUpdateDialogVisible = false
      this.roleUpdateDialogTitle = ''
      this.roleUpdateObj = {}
    }
  }
}
</script>

<style scoped>

</style>
